<template>
	<div>
		<div class="a" v-if="type === 'a'">
			<dl>
				<dt>
					<h3>{{ desc }}</h3>
				</dt>
				<dt class="flex">
					<LazyLoadImg v-for="(v, i) in urls" :key="i" :src="v" width="120px" height="100px" />
				</dt>
				<dd>
					<span>{{ auther }}</span>
					<span> {{ read }}阅读数量</span>
					<span>{{ date }}</span>
				</dd>
			</dl>
		</div>
		<div class="b" v-else-if="type === 'b'">
			<dl>
				<dt>
					<h3>{{ desc }}</h3>
					<p>
						<span>{{ auther }}</span>
						<span> {{ read }}阅读数量</span>
						<span>{{ date }}</span>
					</p>
				</dt>
				<dd>
					<LazyLoadImg :src="urls[0]" width="120px" height="100px" />
				</dd>
			</dl>
		</div>
		<div class="c" v-else>
			<dl>
				<dt>
					<h3>{{ desc }}</h3>
				</dt>
				<dt class="flex">
					<LazyLoadImg :src="urls[0]" width="96vw" height="200px" />
				</dt>
				<dd>
					<span>{{ auther }}</span>
					<span> {{ read }}阅读数量</span>
					<span>{{ date }}</span>
				</dd>
			</dl>
		</div>
	</div>
</template>	


<script setup lang="ts">
import { defineProps } from 'vue'
import LazyLoadImg from '@/components/lazyLoadImg/indexView.vue'
interface PropsType {
	id: string,
	type: "a" | "b" | "c",
	urls: string[],
	desc: string,
	auther: string,
	read: number,
	date: string,
}

const props = defineProps<PropsType>()
</script>

<style lang="scss" scoped>
.a {
	dl {
		border-bottom: 1px solid #ccc;

		img {
			width: 33%;
			padding: 4px;
			box-sizing: border-box;
		}

		span {
			margin: 0 4px;
		}
	}
}

.b {
	dl {
		display: flex;
		border-bottom: 1px solid #ccc;

		dt {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			flex: 1;
		}
	}
}

.c {
	dl {
		border-bottom: 1px solid #ccc;

		img {
			width: 96%;
			height: 200px;
			margin: 10px auto;
			display: block;
		}
	}

}

dl {
	padding: 4px;
	box-sizing: border-box;
}

.flex {
	display: flex;
	justify-content: space-around;
}
</style>

